﻿<phone:PhoneApplicationPage
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Phone7_Fx_Controls="clr-namespace:Phone7.Fx.Controls;assembly=Phone7.Fx"
	 xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
	 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
	  xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"
	   xmlns:Bewise_Phone="clr-namespace:Bewise.Phone;assembly=Bewise.Phone"
	    xmlns:fx="clr-namespace:Odyssey.Effects;assembly=Odyssey"
		 xmlns:Odyssey_Controls="clr-namespace:Odyssey.Controls;assembly=Odyssey" 
		 xmlns:ShoppingList_Converters="clr-namespace:ShoppingList.Converters" 
		 xmlns:Phone7_Fx_Triggers="clr-namespace:Phone7.Fx.Triggers;assembly=Phone7.Fx" 
		 xmlns:System="clr-namespace:System;assembly=mscorlib" 
		 
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    
        xmlns:sltoolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
 sltoolkit:TiltEffect.IsTiltEnabled="True"
    
    x:Class="ShoppingList.Views.ShoppingsView"
    SupportedOrientations="Portrait" mc:Ignorable="d" Orientation="Portrait"
    d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">
   
<!--Sample code showing usage of ApplicationBar--><!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

	<phone:PhoneApplicationPage.Resources>
		<ShoppingList_Converters:DoubleToFormatStringConverter x:Key="DoubleToFormatStringConverter"/>
		<ShoppingList_Converters:StringToImageConverter x:Key="StringToImageConverter"/>
		<DataTemplate x:Key="menuItemTemplate">
			<Odyssey_Controls:ContextMenu>
				<Odyssey_Controls:ContextMenuItem Content="Agregar" Command="{Binding InsertNewItemShoppinListCommand}" InvokeOnMenuClosed="True"/>
				
			</Odyssey_Controls:ContextMenu>
		</DataTemplate>
	</phone:PhoneApplicationPage.Resources>

		
	

	
	 
		
	

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
	<phone:PhoneApplicationPage.DataContext>
		<StaticResource ResourceKey="Locator"/>
	</phone:PhoneApplicationPage.DataContext>

		
	

	
	 
		
	

	<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding ViewModelShopping, Mode=OneWay}">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="VisualStateGroup" ec:ExtendedVisualStateManager.UseFluidLayout="True">
				
				<VisualState x:Name="ShowShoppingList">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridShoppingList">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridAviableProducts">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="listboxproducts">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<System:Boolean>True</System:Boolean>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="ShowAviableProducts"  >
					<Storyboard x:Name="StoryBoardShowAviableProducts"  >
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridShoppingList">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="GridAviableProducts">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="listboxproducts">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<System:Boolean>True</System:Boolean>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
   

		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<VisualStateManager.CustomVisualStateManager>
			<ec:ExtendedVisualStateManager/>
		</VisualStateManager.CustomVisualStateManager>

		<Phone7_Fx_Controls:BindableApplicationBar x:Name="AppBar" BarOpacity="1.0"  >
			<Phone7_Fx_Controls:BindableApplicationBar.MenuItems> 
				<Phone7_Fx_Controls:BindableApplicationBarMenuItem  Text="Settings" Command="{Binding SettingsCommand}" />
			</Phone7_Fx_Controls:BindableApplicationBar.MenuItems>
			<Phone7_Fx_Controls:BindableApplicationBarIconButton x:Name="btn_add" 
				Text="agregar"
				IconUri="/icons/appbar.add.rest.png" Command="{Binding ShowAviableProducts}" IsEnabled="{Binding canShowProducts, Mode=TwoWay}"
	 
	  >
				<i:Interaction.Triggers>
					<i:EventTrigger EventName="Click">
						<ec:GoToStateAction StateName="ShowAviableProducts"/>
					</i:EventTrigger>
				</i:Interaction.Triggers>
			</Phone7_Fx_Controls:BindableApplicationBarIconButton> 
		</Phone7_Fx_Controls:BindableApplicationBar> 





		<!--TitlePanel contains the name of the application and page title-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="SHOPPING ANALYTICS" Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="mis compras" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - place additional content here-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<Grid.RowDefinitions>
				<RowDefinition/>
			</Grid.RowDefinitions>
			<Grid x:Name="GridShoppingList">
				<ListBox x:Name="listBox1" Margin="0,0,0,69" ItemsSource="{Binding MyListOfShopping, Mode=TwoWay}" SelectedItem="{Binding MyShopItem, Mode=TwoWay}">
					
					<ListBox.ItemTemplate>
								<DataTemplate>
									<Grid d:DesignWidth="302" d:DesignHeight="105">
										<Grid.Background>
											<ImageBrush Stretch="Fill"/>
										</Grid.Background>
											<toolkit:ContextMenuService.ContextMenu>
													
													<toolkit:ContextMenu x:Name="MyMenu" > 
														
														<toolkit:MenuItem Header="Eliminar" DataContext="{Binding DataContext, ElementName=ContentPanel}"
														Command="{Binding DeleteMyListProductCommand, Mode=OneWay}" 
														CommandParameter="{Binding DataContext, ElementName=MyMenu, Mode=TwoWay}" 
														/>              		
														</toolkit:ContextMenu>                 	
												</toolkit:ContextMenuService.ContextMenu>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="0.338*"/>
				<ColumnDefinition Width="0.662*"/>
			</Grid.ColumnDefinitions>
			<Border Height="75" Margin="8,8,9,12" Width="75" Background="{StaticResource PhoneAccentBrush}">
											<Image Source="{Binding Product.ImageUri, Converter={StaticResource StringToImageConverter}}"/>
										</Border>
			<TextBlock Margin="8" TextWrapping="Wrap" Text="{Binding Product.Name, Mode=TwoWay}" Grid.Column="1" VerticalAlignment="Center" Style="{StaticResource PhoneTextLargeStyle}"/>
		</Grid>
								</DataTemplate>
					</ListBox.ItemTemplate>
					<i:Interaction.Triggers>
						<i:EventTrigger EventName="SelectionChanged">
							<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding gotoProductCommand}" CommandParameter="{Binding SelectedItem, ElementName=listBox1, Mode=TwoWay}"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
				</ListBox>
				<Grid Height="69" VerticalAlignment="Bottom">
					<TextBlock TextWrapping="Wrap" Text="Total de gasto realizado." Margin="8,22,0,20" HorizontalAlignment="Left" d:LayoutOverrides="Height"/>
					<TextBlock TextWrapping="Wrap" Margin="0,0,7,0" Style="{StaticResource PhoneTextGroupHeaderStyle}" FontFamily="Segoe WP Light" VerticalAlignment="Center" d:LayoutOverrides="GridBox" HorizontalAlignment="Right" Text="{Binding Total, Converter={StaticResource DoubleToFormatStringConverter}, Mode=TwoWay}"/>
				</Grid>
			</Grid>
			<Grid x:Name="GridAviableProducts" Visibility="Collapsed">
				<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Productos disponibles" VerticalAlignment="Top" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
				<Odyssey_Controls:OdcListBox x:Name="listboxproducts" d:LayoutOverrides="Width" Margin="0,43,0,0" ItemsSource="{Binding Products, Mode=TwoWay}">
					 <Odyssey_Controls:OdcListBox.HeaderTemplate>
                    <DataTemplate>
                        <Border Background="{StaticResource PhoneAccentBrush}" Width="72" Height="72" VerticalAlignment="Center" Margin="8,4" HorizontalAlignment="Left">
                            <TextBlock Text="{Binding Title}" VerticalAlignment="Center" FontSize="32" Margin="5,0" Foreground="White"/>
                        </Border>
                    </DataTemplate>
                </Odyssey_Controls:OdcListBox.HeaderTemplate>
				
				   <Odyssey_Controls:OdcListBox.ItemContainerStyle>
                    <Style TargetType="Odyssey_Controls:OdcListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Odyssey_Controls:OdcListBoxItem">
                                    <Border Odyssey_Controls:ContextMenu.ContextMenuTemplate="{StaticResource menuItemTemplate}"  Odyssey_Controls:ContextMenu.IsOpen="{Binding IsContextMenuOpen, Mode=TwoWay}">
                                        <Border.Triggers>
                                        	<EventTrigger>
                                        		<BeginStoryboard>
                                        			<Storyboard>
                                        				<DoubleAnimation Duration="0" Storyboard.TargetName="grid" Storyboard.TargetProperty="Opacity" To="1"/>
                                        				<DoubleAnimation Duration="0" Storyboard.TargetName="plane" Storyboard.TargetProperty="GlobalOffsetX" To="0"/>
                                        			</Storyboard>
                                        		</BeginStoryboard>
                                        	</EventTrigger>
                                        </Border.Triggers>
                                        <Grid x:Name="grid" Opacity="0" fx:FeatherEffect.IsElement="True" CacheMode="BitmapCache"  Height="80">
                                            <Grid.Projection>
                                                <PlaneProjection x:Name="plane" GlobalOffsetX="0" />
                                            </Grid.Projection>
                                            <Odyssey_Controls:CommandButton  BorderThickness="0" Width="80" Height="80" VerticalAlignment="Center"
                                                                  HorizontalAlignment="Left" Margin="0" Padding="0"
                                                                 Command="{Binding OpenContextMenu}" >
                                                <Odyssey_Controls:CommandButton.Template>
                                                    <ControlTemplate>
                                                        <Rectangle Fill="{StaticResource PhoneChromeBrush}" Width="72" Height="72" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,5"/>
                                                    </ControlTemplate>
                                                </Odyssey_Controls:CommandButton.Template>
                                            </Odyssey_Controls:CommandButton>
                                            <!--<Rectangle Fill="{StaticResource PhoneChromeBrush}" Width="72" Height="72" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,5"/>-->
                                           <Grid  HorizontalAlignment="Stretch" >
					                            <Grid.ColumnDefinitions>
					                            	<ColumnDefinition Width="Auto"/>
					                            	<ColumnDefinition Width="*"/>
					                            </Grid.ColumnDefinitions>
					                        	<TextBlock Grid.Column="1" Text="{Binding CurrentProduct.Name}" FontSize="48" VerticalAlignment="Center" Margin="15,4,5,4"/>
					                             
					                            <Image Margin="8,4,8,8" Width="72" Height="72" Source="{Binding CurrentProduct.ImageUri, Converter={StaticResource StringToImageConverter}, Mode=TwoWay}"/>
					                            </Grid>
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Odyssey_Controls:OdcListBox.ItemContainerStyle>
					
					
				</Odyssey_Controls:OdcListBox>
			</Grid>
		</Grid>
    
	
	</Grid>
	
	
	 

</phone:PhoneApplicationPage>
